<template>
    <div>
      <Nav></Nav>
      <Nav2></Nav2>
      <Swipermy2></Swipermy2>
      <ul class="ulone">
        <li v-for="item in data2">
          <img :src="item" alt="">
        </li>
      </ul>
      <ul class="ultwo">
        <li>分类：</li>
        <li :class="{active:cur3==index}" @click="activ(index)" v-for="(item,index) in data">{{item}}</li>
      </ul>

      <div class="conten">
        <div class="sort">
          <span>销量</span>
          <span>价格 <img src="/static/lyl/xiaoshang.png" alt=""><img src="/static/lyl/xiaoxia.png" alt=""></span>
          <span>评分最高</span>
        </div>
        <component :is="com2"></component>
        <div class="pagesion">
          <span :class="{act2:curss2==1}" class="nest"> < </span>
          <span :class="{act1:curss==index}" @click="bian(index)" v-for="(item,index) in data4">{{item}}</span>
          <span :class="{act2:curss2==6}" class="nest"> > </span>
          <input ref="modes" type="number" v-model="vals">
          <span @click="tiao()" class="last">跳转</span>
        </div>
      </div>

      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Nav2 from '../com/Nav2'
  import Footer from '../com/Footer'
  import Swipermy2 from './Swiper-my2'
  import Show0 from './Show0'
  import Show1 from './Show1'
  import Show2 from './Show2'
  import Show3 from './Show3'
  import Show4 from './Show4'
  import Show5 from './Show5'
    export default {
      name: "Expserver",
      components:{
        Nav,
        Nav2,
        Footer,
        Swipermy2,
        Show0,
        Show1,
        Show2,
        Show3,
        Show4,
        Show5
      },
      data(){
        return {
          vals:'',
          curss:0,
          curss2:1,
          com2:'Show0',
          data2:['/static/lyl/hot1.png','/static/lyl/hot2.png','/static/lyl/hot2.png','/static/lyl/hot4.png',],
          data:['全部','餐饮','' +
          '酒店','休闲','电影','汽车装饰'],
          cur3:0,
          data4:[1,2,3,4,5,6]
        }
      },
      methods:{
        activ(i){
          this.cur3 = i;
          this.com2 = 'Show'+i;
        },
        bian(i){
          this.curss = i;
          this.curss2 = i+1;
          this.com2 = 'Show'+i;
        },
        tiao(){
          this.com2 = 'Show'+(this.vals-1);
          this.curss = this.vals-1;
          this.curss2 = this.vals;
          this.vals = '';
        }
      }
    }
</script>

<style scoped>
  .ulone{
    width: 1280px;
    margin:20px auto 0;
    display: flex;
    justify-content: space-between;
  }
  .ulone img{
    width: 305px;
    transition: all 1s;
  }
  .ulone img:hover{
    transform: scale(1.5) translateY(20px);
  }
  .ulone li:nth-child(1) img:hover{
    transform: scale(1.5) translateY(20px) translateX(50px);
  }
  .ulone li:nth-child(4) img:hover{
    transform: scale(1.5) translateY(20px) translateX(-50px);
  }
  .ultwo{
    width: 1280px;
    margin: auto;
    display: flex;
    border-bottom: 1px solid #e7e7e7;
  }
  .ultwo li{
    font-size: 16px;
    line-height: 80px;
    margin-left: 24px;
    padding: 0 10px;
    cursor: pointer;
  }
  .ultwo li:nth-child(1){
    margin-left: 0;
    padding: 0;
  }
  .ultwo .active{
    background: #498e3d;
    color: #fff;
  }
  .conten{
    width: 1280px;
    margin: auto;
  }
  .conten .sort{
    display: flex;
    justify-content: flex-end;
    padding: 20px 0;
  }
  .conten .sort span{
    font-size: 16px;
    border: 1px solid #e7e7e7;
    margin-left: 40px;
    padding: 5px 15px;
    cursor: pointer;
  }
  .conten .sort span:nth-child(2){
    position: relative;
    padding-right: 30px;
  }
  .conten .sort span:nth-child(2) img:nth-child(1){
    position: absolute;
    right: 10px;
    top: 12px;
  }
  .conten .sort span:nth-child(2) img:nth-child(2){
    position: absolute;
    right: 10px;
    bottom: 8px;
  }
  .pagesion{
    text-align: center;
    padding: 20px 0 40px;
  }
  .pagesion span{
    display: inline-block;
    font-size: 22px;
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: 30px;
    cursor: pointer;
  }
  .pagesion input{
    width: 50px;
    height: 30px;
    border: 1px solid #ddd;
    margin-left: 30px;
    vertical-align: top;
    text-align: center;
  }
  .pagesion .nest{
    background: #498e3d;
    color: #fff;
  }
  .pagesion .last{
    background: #f08200;
    color: #fff;
    font-size: 16px;
  }
  .pagesion .act1{
    background: #498e3d;
    color: #fff;
  }
  .pagesion .act2{
    background: #ddd;
  }
</style>
